﻿/*
 * dropDownGrid v1.0
 * need jquery.jqGrid.js bootstrap.min.js
 */
(function ($) {
    $.fn.dropDownGrid = function (config) {
        var options = $.extend(true, {
            jqgridOp: {
                viewrecords: true,
                url: "",
                colNames: [],
                colModel: []
            },
            dropDown: {
                keyCol: "",
                viewCol: "",
                search: true,
                params: {},
                showRefresh: false,
                extendBtn: false,
                extendBtnIcon: "fa fa-picture-o bigger-110",
                extendBtnFunction: function (keyValue, viewValue) { }
            }
        }, config);
        var $this = $(this);
        if ($this.children("div[class='dropdown-menu']").innerHTML) {
            return;
        }
        var randomId = Math.round(Math.random() * 10000);
        var addonV = '<span id="clearbtn_' + randomId + '" class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>';
        if (options.dropDown.extendBtn) {
            addonV += '<span id="extendbtn_' + randomId + '" class="input-group-addon"><i class="' + options.dropDown.extendBtnIcon + '"></i></span>';
        }

        var appendV = addonV + '<div class="dropdown-menu" ><table id="grid_' + randomId + '"></table><div id="pager_' + randomId + '"></div></div>';
        $this.append(appendV);
        var pager_selector = $this.children("div[class='dropdown-menu']").children("div");
        var grid_selector = $this.children("div[class='dropdown-menu']").children("table");
        grid_selector.jqGrid({
            jsonReader: {
                root: 'rows',
                page: 'pageNo',
                total: 'totalPages',
            },
            height: options.jqgridOp.height || "auto",
            width: options.jqgridOp.width || "600",
            viewrecords: options.jqgridOp.viewrecords,
            rowNum: options.jqgridOp.rowNum || 10,
            rowList: options.jqgridOp.rowList || [10, 20, 30],
            pager: pager_selector,
            rownumbers: true,
            rownumWidth: 40,
            caption: options.jqgridOp.caption,
            url: options.jqgridOp.url,
            postData: {},
            contentType: 'application/json',
            mtype: "GET",
            datatype: 'json',
            beforeRequest: function () {
                grid_selector.jqGrid("setGridParam", { postData: options.dropDown.params });
            },
            onSelectRow: function (id) {
                $this.children("input[type='hidden']").attr("value", grid_selector.getCell(id, options.dropDown.keyCol));
                $this.children("input[type='text']").attr("value", grid_selector.getCell(id, options.dropDown.viewCol));
            },
            colNames: options.jqgridOp.colNames,
            colModel: options.jqgridOp.colModel,
            loadComplete: function () {
                setTimeout(function () {
                    var replacement =
                    {
                        'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                        'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                        'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                        'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
                    };
                    $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                        var icon = $(this);
                        var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                        if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
                    })
                }, 0);
            }
        });

        if (options.dropDown.search) {
            grid_selector.jqGrid('filterToolbar', { searchOnEnter: true });
        }
        if (options.dropDown.showRefresh) {
            $this.on('show.bs.dropdown', function () {
                grid_selector.trigger("reloadGrid");
            });
        }
        $this.find(".dropdown-menu").click(function (e) {
            e.stopPropagation();
        });
        grid_selector.closest(".ui-jqgrid-bdiv").css({ "overflow-x": "hidden" });

        $("#clearbtn_" + randomId).bind("click", function () {
            $this.children("input[type='hidden']").attr("value", "");
            $this.children("input[type='text']").attr("value", "");
        });
        if (options.dropDown.extendBtn) {
            $("#extendbtn_" + randomId).bind("click", function () {
                options.dropDown.extendBtnFunction($this.children("input[type='hidden']").attr("value"), $this.children("input[type='text']").attr("value"));
            });
        }


    };
})(jQuery);